{% extends "admin/framework.twig" %}
{% block title %}
    <h1>
        用户管理
        <small>管理Bastet系统的用户</small>
    </h1>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-xs-2 col-xs-offset-10">
            <button type="button" href="./users/add" class="btn btn-block btn-primary" data-toggle="modal" data-target="#myModal">
                <i class='fa fa-user-plus'></i>新增用户
            </button>
        </div>
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">菜单编辑</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="table" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>权限</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                        </tfoot>
                    </table>
                </div>
                <!-- /.box-body -->
                <div id="Dialog" title="">
                    <iframe id="Dialog-iframe" frameborder="0" src="" width="100%" height="450"></iframe>
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                ...
            </div>
        </div>
    </div>
{% endblock %}
{% block extend_scripts %}
    <script>
        $(document).ready(function () {
            table = $("#table").DataTable({
                "ajax": "./users/json",
                columns: [
                    {data: 'id'},
                    {data: 'name'},
                    {data: 'role'},
                    {data: ''}
                ],
                "columnDefs": [{
                    "targets": -1,
                    "render": function(data, type, row) {
                        var editUrl = './users/edit/' + row['id'];
                        var delUrl = './users/del/' + row['id'];
                        var update = '<button type="button" value="0" onclick="change(this)" class="btn btn-sm btn-primary">修改</button>';
                        var editButton ='<button type="button" href="'+ editUrl +'" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#myModal">编辑</button>';
                        var delbBtton = '<button type="button" href="'+ delUrl +'" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal">删除</button>';
                        return update + delbBtton;
                    }}],
                "language": {
                    "url": "../../assets/DataTables/js/jquery.dataTables-Chinese.json"
                }
            })
            //Modal关闭时时要清除数据，以便下次重新加载
            $("#myModal").on("hide.bs.modal", function() {
                $(this).removeData("bs.modal");
            });
        });
        function change(button) {
            tr = $(button).parent().siblings();
            if ($(button).val() == 0) {
                $(button).val(1);
                $(button).text('保存');
                $(button).attr('class', 'btn btn-sm btn-success')
                for (var i = 1; i <= 2; i++) {
                    var text = $(tr[i]).text();
                    $(tr[i]).text('');
                    $(tr[i]).append('<input class="col-sm-8 control-label" value="' + text + '"></input>');
                }
            } else {
                var data = {
                    'name': $(tr[1]).children().val(),
                    'role': $(tr[2]).children().val(),
                }
                $.ajax(
                    {
                        url: "./users/change/" + $(tr[0]).text(),
                        data: data,
                        type: "POST",
                        success: function (data) {
                            data = JSON.parse(data);
                            if (data['state']) {
                                $(button).val(0);
                                $(button).text('修改');
                                $(button).attr('class', 'btn btn-sm btn-primary');
                                for (var i = 1; i <= 2; i++) {
                                    $(tr[i]).text($(tr[i]).children().val());
                                }
                                $("#table").DataTable().ajax.reload(null, false);   //重新加载DataTable数据
                            } else {
                                alert(data['data']);
                            }
                        }
                    });
            }
        }
    </script>
{% endblock %}